<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物联网环境监测系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
        	background: url(../p4.jpg) no-repeat center top;
		//background:linear-gradient(to right, #00ffff,#800080,#ff0000);
        }
        
        li {
            list-style: none;
        }
        
        .baidu {
            overflow: hidden;
            /* display: none; */
            margin: 100px auto;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }
        
        .baidu li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
        
        .baidu img {
            width: 100px;
        }
        
        .title {
            margin: 0 auto;
            text-align: center;
            height: 60px;
            width: 400px;
            color: red;
            font-size: 20px;
        }
        
        .temp,
        .humid,
        #show_time {
            margin: 0 auto;
            text-align: center;
            font-size: 20px;
            font-weight: bolder;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>

    <ul class="baidu">
        <li><img src="../p1.jpg"></li>
        <li><img src="../p2.jpg"></li>
        <li><img src="../p3.jpg"></li>
        <li><img src="../p4.jpg"></li>
    </ul>
    <div class="title">
        <h1>物联网环境监测系统</h1>
    </div>
    <div class="temp">温度</div>
    <div class="humid">湿度</div>
    <div id="show_time">
        <script>
            //这里代码多了几行，但是不会延迟显示，速度比较好，格式可以自定义，是理想的时间显示
            setInterval("fun(show_time)", 1);

            function fun(timeID) { 
                var date = new Date();  //创建对象  
                var y = date.getFullYear();    //获取年份  
                var m = date.getMonth() + 1;   //获取月份  返回0-11  
                var d = date.getDate(); // 获取日  
                var w = date.getDay();   //获取星期几  返回0-6   (0=星期天) 
                var ww = ' 星期' + '日一二三四五六'.charAt(new Date().getDay()); //星期几
                var h = date.getHours();  //时
                var minute = date.getMinutes()  //分
                var s = date.getSeconds(); //秒
                // var sss = date.getMilliseconds(); //毫秒
                if (m < 10) {
                    m = "0" + m;
                }
                if (d < 10) {
                    d = "0" + d;
                }
                if (h < 10) {
                    h = "0" + h;
                }

                if (minute < 10) {
                    minute = "0" + minute;
                }

                if (s < 10) {
                    s = "0" + s;
                }
                document.getElementById(timeID.id).innerHTML =  y + "-" + m + "-" + d + "   " + h + ":" + minute + ":" + s + "  " + ww;
                //document.write(y+"-"+m+"-"+d+"   "+h+":"+minute+":"+s);    
            }
        </script>
    </div>
    <script>
        // 获取元素 .querySelector('.baidu')可以不写，写上严谨一点
        var imgs = document.querySelector('.baidu').querySelectorAll('img');

        // console.log(imgs);
        // 循环注册事件
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                // document.body.style.backgroundImage = 'url(this.src)';
                // this.src 就是点击图片的路径   images/2.jpg
                // console.log(this.src);
                // 把这个路径 this.src 给body 就可以
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

</html>
